<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/menu/js/jquery-3.5.1.min.js"></script>

    <link rel="stylesheet" href="/menu/layui/css/layui.css">
    <script src="/menu/js/vue.js"></script>
    <script src="/menu/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/menu/css/pintuer.css">
    <link rel="stylesheet" href="/menu/css/admin.css">

</head>
<body>

<div id="app">
    <ul class="padding " >
        <br><font size="5">增加角色：</font> <li class="field" style="margin-left: 100px">
           <input  type="text" class="input w50" v-model="role" placeholder="请输入角色名称" id="role"/>
        </li></ul>

    <br><br> <br><div id="test1" class="layui-elem-field layui-field-title" style="margin-left: 50px"></div>

    <div class="field">
        <button style="margin-left: 230px" id="submit" class="button bg-main icon-check-square-o" type="button" >
            提交</button>
    </div>
</div>
<script>
    var menu;

    $.ajax({
        url: "/menu/getAllSubmenus",
        type: "post",
        dataType: "json",
        async: false,
        success: function (data) {
            menu = data.data;
            return;
        },
    });


    var getData;
    var list = [];
    var _this;
    var transfer;
    var app=new Vue({
        el: "#app",
        data: {
            depts: null,
            role:'',
            permissions:[],
            //定义查询条件对象
        },
        created: function () {
            _this = this;
            this.selectByDept();

        },

        mounted:function(){
            layui.use('transfer', function () {
            transfer = layui.transfer;

                $("#submit").on("click", function () {
                    if(_this.role.trim()==''){
                        alert("请输入角色名称")
                    }else {
                        getData = transfer.getData('demo1');
                        $.ajax({
                            url: "/menu/addRole?roleName=" + _this.role.trim(),
                            type: "post",
                            contentType: "application/json",
                            dataType: "json",
                            data: JSON.stringify(getData),
                            success: function (data) {
                                alert("添加成功")
                            }, error: function (data) {
                                alert("添加失败，已存在该角色")
                            }
                            ,
                        })
                    } ;
                })
                transfer.render({
                    elem: '#test1'
                    , data: menu
                    ,title: ['待选权限', '添加权限']
                    , id: 'demo1'
                    ,height:700
                    ,parseData: function (data) {
                        return {
                            "value": data.permissionId //数据值
                            , "title": data.permissionName //数据标题
                            , "disabled": data.disabled  //是否禁用
                            , "checked": data.checked //是否选中
                        }
                    },

                });
            });
        },
        updated:function(){


        },
        methods: {
            selectByDept: function () {
                _this = this;
                $.ajax({
                    url: "/menu/getAllDepts",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        _this.depts = data.data;
                        console.log( _this.depts)
                    }
                })
            }
        }
    })
            //查询部门信息
    //         selectByExample:function(){
    //             _this=this;
    //             $.ajax({
    //                 url:"/getAllSubmenusByDept",
    //                 type:"get",
    //                 dataType:"json",
    //                 data:{id:1},
    //                 success:function(data){
    //                         _this.menu=data.data;
    //                         console.log( _this.menu)
    //                 }
    //             })
    //         }
    //     },
    //     watch:{
    //         depts:{
    //         //深度监听 监听对象中属性的变化以及集合中对象的变化
    //         handler:function(n,o){
    //             this.selectByExample();
    //         },
    //         deep:true
    //     }
    // },






</script>
</body>
</html>